<script setup lang="ts" name="B7ToRefAndToRefs">
import { reactive, toRef, toRefs } from "vue";

const person = reactive({ name: "张三", age: 18 });

const { name, age } = toRefs(person);

const name1 = toRef(person, "name");

const changeName = () => {
  name.value += "~";
};

const changeAge = () => {
  age.value += 1;
};
</script>

<template>
  <div>
    <div>姓名：{{ person.name }}</div>
    <div>年龄：{{ person.age }}</div>
    <div>姓名(toRef)：{{ name1 }}</div>
  </div>
  <div>
    <button
      @click="changeName"
      class="bg-gray-100 border px-1 py-0.5 hover:bg-gray-50"
    >
      改名
    </button>
    <button
      @click="changeAge"
      class="bg-gray-100 border px-1 py-0.5 hover:bg-gray-50"
    >
      改年龄
    </button>
  </div>
</template>
